<template>
  <el-tabs
    v-model="localActiveTab"
    class="contact-tabs"
    type="border-card"
    stretch
    @tab-click="onTabChange"
  >
    <el-tab-pane label="我的会话" name="mine">
      <ul class="contact-ul">
        <li
          v-for="item in myContacts"
          :key="item.id"
          :class="{ active: currentContact && currentContact.id === item.id }"
          @click="$emit('selectContact', item)"
        >
          <ContactSessionItem
            :avatar="item.avatar"
            :name="item.name"
            :time="item.lastMsgTime"
            :lastMsg="item.lastMsg"
            :isVoice="item.isVoice"
            :voiceDuration="item.voiceDuration"
            :unread="item.unread"
          />
        </li>
      </ul>
    </el-tab-pane>
    <el-tab-pane label="同事会话" name="colleagues">
      <ul class="contact-ul">
        <li
          v-for="item in colleagueContacts"
          :key="item.id"
          :class="{ active: currentContact && currentContact.id === item.id }"
          @click="$emit('selectContact', item)"
        >
          <ContactSessionItem
            :avatar="item.avatar"
            :name="item.name"
            :time="item.sendTime"
            :lastMsg="item.lastMsg"
            :isVoice="item.isVoice"
            :voiceDuration="item.voiceDuration"
            :unread="item.unread"
          />
        </li>
      </ul>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref, watch } from "vue";
import ContactSessionItem from "./ContactSessionItem.vue";
const props = defineProps({
  activeTab: String,
  myContacts: Array,
  colleagueContacts: Array,
  currentContact: Object,
});
const emit = defineEmits(["selectContact", "update:activeTab"]);
const localActiveTab = ref(props.activeTab);
watch(
  () => props.activeTab,
  (v) => (localActiveTab.value = v)
);
function onTabChange(tab) {
  emit("update:activeTab", tab.paneName);
}
</script>

<style scoped lang="scss">
.contact-tabs {
  height: 100%;
  ::v-deep(.el-tabs__content) {
    height: 100%;
    overflow: auto;
  }
}
.contact-ul {
  max-height: 90%;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-ul li {
  display: flex;
  align-items: center;
  padding: 10px 2px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}
.contact-ul li.active {
  background: #e6f7ff;
}
.contact-ul .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>
